<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${applicationScope.ojName}</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/amazeui.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/amazeui.flat.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/amazeui.page.css"/>
    <style>
        .main {
            width: 60%;
            margin: 0 auto;
        }

        form {
            width: 60%;
            margin: 30px auto;
        }
    </style>
</head>

<body>

<jsp:include page="/heard.html" flush="true"/>

<div class="main" id="main">
    <form class="am-form">
        <fieldset>
            <legend>登录</legend>

            <div class="am-form-group am-form-group-lg am-form-icon am-form-feedback" id="username_div">
                <label for="username">学号</label>
                <input type="text" class="am-radius am-form-field" id="username">
                <span class="am-icon-times" style="display: none;"></span>
            </div>

            <div class="am-form-group am-form-group-lg am-form-icon am-form-feedback" id="password_div">
                <label for="password">密码</label>
                <input type="password" class="am-radius am-form-field" id="password">
                <span class="am-icon-times" style="display: none;"></span>
            </div>

            <button type="button" class="am-btn am-btn-primary submit">登录</button>
            <div class="am-btn-group">
                <a href="${pageContext.request.contextPath}/lostpassword.html" class="am-btn am-btn-secondary">忘记密码</a>
                <a href="${pageContext.request.contextPath}/register.html" class="am-btn am-btn-secondary">注册</a>
            </div>
        </fieldset>
    </form>
</div>

<jsp:include page="/foot.html" flush="true"/>

<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/js/sha256.min.js"></script>
<script>
    $(function () {
        $('.submit').click(function () {
            clearError();
            $.AMUI.progress.start();
            var username = $('#username').val();
            var password = $('#password').val();

            var patrn = /^([a-zA-Z0-9]){1,16}$/;
            if (!patrn.exec(username)) {
                setUsernameError();
                $.AMUI.progress.done();
                return false;
            }
            patrn = /^(\w){6,16}$/;
            if (patrn.exec(password)) {
            } else {
                setPasswordError();
                $.AMUI.progress.done();
                return false;
            }
            // password = sha256(password);
            $.post('${pageContext.request.contextPath}/api/login.html', {
                username: username,
                password: password,
                from: "${param.from}"
            }, function (data) {
                if (data === 'true') {
                    <c:choose>
                    <c:when test="${param.from != null || param.from eq ''}">
                    window.location.href = "${param.from}";
                    </c:when>
                    <c:otherwise>
                    window.location.href = "${pageContext.request.contextPath}/index.html";
                    </c:otherwise>
                    </c:choose>
                } else {
                    alert('用户名或密码错误');
                    $('#password').val('');
                    setError();
                }
                $.AMUI.progress.done();
            });
        });
    });

    function setUsernameError() {
        $('#username_div').addClass('am-form-error')
            .find('span').show();
    }

    function setPasswordError() {
        $('#password_div').addClass('am-form-error')
            .find('span').show();
    }

    function setError() {
        setUsernameError();
        setPasswordError();
    }

    function clearError() {
        $('#password_div').removeClass('am-form-error')
            .find('span').hide();
        $('#username_div').removeClass('am-form-error')
            .find('span').hide();
    }
</script>
</body>

</html>